<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#007aff"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current == 0">
				<!-- 列表渲染加上v-for -->
				<uni-card>
					<!-- 顶部订单编号 -->
					<navigator class="order-container" url="/pages/my/orderDetail/orderDetail?status=4">
						<view>
							订单编号:123456
						</view>
						<view class="arrow">

						</view>
					</navigator>
					<!-- 中间详情部分 -->
					<view class="order-detail">
						<view>
							<text>服务项目:车辆保养</text>
							<view class="goShop">
								<text>服务门店:宇宙汽修厂</text>
								<img src="@/static/plane.png" alt="" />
							</view>
							<text>下单时间:2022-09-10 12:09</text>
						</view>
						<!-- 根据status动态渲染 -->
						<view>
							<text>已完成</text>
						</view>
					</view>
					<!-- 底部按钮部分 -->
					<view class="order-bottom">
						<view>
							实付:200元
						</view>
						<view>
							<uni-tag type="primary" @click="cancelOrder" inverted text="取消订单"></uni-tag>
							<uni-tag type="primary" @click="toPay" text="立即支付"></uni-tag>
						</view>
					</view>
				</uni-card>
			</view>
			<view v-if="current == 1">
				<!-- 列表渲染加上v-for -->
				<uni-card>
					<!-- 顶部订单编号 -->
					<navigator class="order-container" url="/pages/my/orderDetail/orderDetail?status=1">
						<view>
							订单编号:123456
						</view>
						<view class="arrow">

						</view>
					</navigator>
					<!-- 中间详情部分 -->
					<view class="order-detail">
						<view>
							<text>服务项目:车辆保养</text>
							<view class="goShop">
								<text>服务门店:宇宙汽修厂</text>
								<img src="@/static/plane.png" alt="" />
							</view>
							<text>下单时间:2022-09-10 12:09</text>
						</view>
						<view>
							<text class="uni-error">待支付</text>
						</view>
					</view>
					<!-- 底部按钮部分 -->
					<view class="order-bottom">
						<view>
							实付:200元
						</view>
						<view>
							<uni-tag type="primary" @click="cancelOrder" inverted text="取消订单"></uni-tag>
							<uni-tag type="primary" @click="toPay" text="立即支付"></uni-tag>
						</view>
					</view>
				</uni-card>
			</view>
			<view v-if="current == 2">
				<uni-card>
					<!-- 顶部订单编号 -->
					<navigator class="order-container" url="/pages/my/orderDetail/orderDetail?status=2">
						<view>
							订单编号:123456
						</view>
						<view class="arrow">

						</view>
					</navigator>
					<!-- 中间详情部分 -->
					<view class="order-detail">
						<view>
							<text>服务项目:车辆保养</text>
							<view class="goShop">
								<text>服务门店:宇宙汽修厂</text>
								<img src="@/static/plane.png" alt="" />
							</view>
							<text>下单时间:2022-09-10 12:09</text>
						</view>
						<view>
							<text class="uni-primary">待使用</text>
						</view>
					</view>
					<!-- 底部按钮部分 -->
					<view class="order-bottom">
						<view>
							实付:200元
						</view>
						<view>
							<uni-tag type="primary" @click="toRefund" inverted text="申请退款"></uni-tag>
							<uni-tag type="primary" @click="toBalance" text="扫码结算"></uni-tag>
						</view>
					</view>
				</uni-card>
			</view>
			<view v-if="current == 3">
				<uni-card>
					<!-- 顶部订单编号 -->
					<navigator class="order-container" url="/pages/my/orderDetail/orderDetail?status=3">
						<view>
							订单编号:123456
						</view>
						<view class="arrow">

						</view>
					</navigator>
					<!-- 中间详情部分 -->
					<view class="order-detail">
						<view>
							<text>服务项目:车辆保养</text>
							<view class="goShop">
								<text>服务门店:宇宙汽修厂</text>
								<img src="@/static/plane.png" alt="" />
							</view>
							<text>下单时间:2022-09-10 12:09</text>
						</view>
						<view>
							<text class="uni-warning">待评价</text>
						</view>
					</view>
					<!-- 底部按钮部分 -->
					<view class="order-bottom">
						<view>
							实付:200元
						</view>
						<view>
							<uni-tag type="primary" @click="toEvaluate" inverted text="立即评价"></uni-tag>
							<uni-tag type="primary" @click="againOrder" text="再来一单"></uni-tag>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
		<!-- 二维码弹窗 -->
		<uni-popup ref="popup" background-color="#fff" title="使用凭证">
			<uni-popup-dialog type="info" title="使用凭证" :showClose="false">
				<img style="width: 300rpx;height: 300rpx;" src="@/static/code.png" alt="" />
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				items: ['全部', '待支付', '待使用', '待评价'],
				current: 0,
			}
		},
		onLoad(options) {
			this.current = options.current
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 以下事件均需传入订单id进行操作
			// 再来一单
			againOrder() {

			},
			// 立即评价
			toEvaluate() {
				wx.navigateTo({
					url: '/pages/my/evaluate/evaluate'
				})
			},
			// 扫码结算
			toBalance() {
				this.$refs.popup.open()
			},
			// 申请退款
			toRefund() {
				uni.showModal({
					content: '退款后将原路返回到支付账户，请确认是否退款吗？',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			// 立即支付
			toPay() {

			},
			// 取消订单
			cancelOrder() {
				uni.showModal({
					content: '确定要取消订单吗？',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		// margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 10px;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		// align-items: center;
		height: 150px;
		text-align: center;
	}

	.content>view {
		width: 100%;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}

	// 订单部分样式
	.order-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 10rpx;
	}

	.order-container>view:nth-child(1) {
		font-weight: bold;
	}

	.arrow {
		width: 10rpx;
		height: 10rpx;
		border-top: 2rpx solid #000;
		border-right: 2rpx solid #000;
		transform: rotate(45deg);
	}

	.order-detail {
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #eee;
	}

	.order-detail>view:nth-child(1)>text {
		display: block;
		text-align: start;
	}

	.order-detail>view:nth-child(2) {
		display: flex;
		align-items: center;
	}
	
	.goShop {
		display: flex;
		align-items: center;
		padding: 8rpx 0;
	}

	.goShop>img {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.order-bottom {
		display: flex;
		padding: 20rpx 0 0 0;
		justify-content: space-between;
	}

	.order-bottom>view:nth-child(2)>uni-tag {
		margin-left: 10rpx;
	}

	// 弹出框
	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		background-color: #fff;
	}
</style>